<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="queryParams.companyName" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="queryParams.phone" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item label="开始时间" prop="startTime">
                <el-date-picker clearable v-model="queryParams.startTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择创建时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker clearable v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择创建时间">
                </el-date-picker>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tagList">
            <el-table-column label="公司名称" align="center" prop="linkmanName" />
            <el-table-column label="手机号" align="center" prop="phone" />
            <el-table-column label="联系人" align="center">
                <template slot-scope="{row}">
                    <!-- <span>{{ fomatterAdressName(row.startProvince) }} / {{ fomatterAdressName(row.startCity) }}</span> -->
                    <div>{{ row.linkmanName }}</div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="营业执照" align="center">
                <template slot-scope="{row}">
                    {{ row.businessLicense }}

                </template>
            </el-table-column> -->
            <el-table-column label="申请时间" align="center" prop="vehicleType">
                <template slot-scope="{row}">
                    {{ row.timeOfApplication }}
                </template>
            </el-table-column>
            <el-table-column label="审核状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.auditStatus">{{ scope.row.auditStatus == 1 ? "通过" : '拒绝' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="审核时间" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.auditTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="审核人" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.auditName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否置顶" align="center">
                <template slot-scope="scope">

                    <span>{{ scope.row.whetherTop == 1 ? "是" : '否' }}</span>

                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="text" @click="operationEdit(scope.row)">编辑</el-button> -->
                    <!-- <el-button size="mini" type="text" @click="operationDel(scope.row)">删除</el-button> -->
                    <el-button size="mini" type="text" v-if="scope.row.auditStatus == null"
                        @click="operationBy(1, scope.row)">通过</el-button>
                    <el-button size="mini" type="text" v-if="scope.row.auditStatus == null"
                        @click="operationBy(2, scope.row)">拒绝</el-button>
                    <el-button size="mini" type="text" v-if="scope.row.whetherTop == 0"
                        @click="operationTop(1, scope.row)">置顶</el-button>
                    <el-button size="mini" type="text" v-else @click="operationTop(2, scope.row)">取消置顶</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script>
import Enmu from "@/utils/enmu";
import { findCarList, getQuoteList, getLogList } from "@/api/crm/transport";
import { AutomobileMarketList, AutomobileMarketInfo, AutomobileMarketSave, AutomobileMarketUpdate, AutomobileMarketDelete, AutomobileMarketPass, AutomobileMarketRefuse, AutomobileMarketTop, AutomobileMarketCancelTop } from "@/api/crm/car";
import { forrmatterEnmu } from "@/utils/index"
import { mapGetters } from "vuex"
import ProviceSelect from "@/components/ProviceSelect/index.vue"
import { timestampToDate } from '@/utils/index'
export default {
    name: "Tag",
    data() {
        return {
            provinces: [],
            cityslist: [],
            queryCitys: [],
            queryRegions: [],
            queryCitysAim: [],
            queryRegionsAim: [],
            Enmu,
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 标签管理表格数据
            tagList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {

                pageNum: 1,
                pageSize: 20
            },
            // 报价列表
            quotationList: [],
            baseInfo: {},
            // 联系列表
            linkList: [],
            quotationPageInfo: {
                total: 0,
                pageSize: 10,
                pageNum: 1
            },
            linkPageInfo: {
                total: 0,
                pageSize: 10,
                pageNum: 1
            }
        };
    },
    created() {
        this.getList();
    },
    filters: {
        forrmatterTime(time) {
            if (!time || time == '') return "";
            return timestampToDate(time, 'ymdhm');
        }
    },
    computed: {
        ...mapGetters(['allCityList'])
    },
    components: { ProviceSelect },
    methods: {
        forrmatterEnmu,

        // 省市区转换成中文
        fomatterAdressName(code) {
            let index = this.allCityList.findIndex(ele => ele.id == code);
            return index > -1 ? this.allCityList[index].cityName : code;
        },
        // 编辑
        operationEdit(row) {


        },
        // 删除
        operationDel(row) {

        },
        // 1通过   2 拒绝
        operationBy(type, row) {
            if (type == 1) {
                AutomobileMarketPass({
                    id: row.id
                }).then(res => {
                    this.getList()
                })
            } else {
                AutomobileMarketRefuse({
                    id: row.id
                }).then(res => {
                    this.getList()
                })
            }

        },
        // 1置顶   2 取消
        operationTop(type, row) {

            if (type == 1) {
                AutomobileMarketTop({
                    id: row.id
                }).then(res => {
                    this.getList()
                })
            } else {
                AutomobileMarketCancelTop({
                    id: row.id
                }).then(res => {
                    this.getList()
                })
            }
        },
        getLogs(row) {
            getLogList({
                callType: 1, demandId: row.id,
                pageNum: this.linkPageInfo.pageNum,
                pageSize: this.linkPageInfo.pageSize
            }).then(res => {
                this.linkList = res.rows;
            })
        },
        /** 查询标签管理列表 */
        getList() {
            this.loading = true;
            AutomobileMarketList(this.queryParams).then(response => {
                this.tagList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        }
    }
};
</script>
<style lang="scss" scoped>
.info-content {
    font-size: 14px;

    .base-info {
        display: flex;
        flex-wrap: wrap;
        width: 800px;
    }

    .info-item {
        width: 30%;
        flex: 0 0 30%;
        margin-bottom: 15px;

        span {
            font-weight: 600;
        }
    }

    .info-item-row {
        width: 50%;
        flex: 0 0 50%;
        margin-bottom: 15px;

        span {
            font-weight: 600;
        }
    }
}

.other-info {
    display: flex;
    margin-top: 30px;

    .info-table {
        margin-left: 30px;

        &:first-of-type {
            margin-left: 0;
        }
    }
}

.info-title {
    font-size: 18px;
    margin-bottom: 5px;

    &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 15px;
        background: #1777FF;
        border-radius: 3px;
        margin-right: 8px;
    }
}
</style>